import React, { useEffect, useRef } from 'react';
import './index.less';
import { Button, Popover, Space, Upload } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import Title from 'components/title';

const uploadTip = () => (
    <div>
        <div>上传说明</div>
        <div>1. 格式支持：视频（mp4、ogg、webM）</div>
        <div>2. 单个音频文件大小不超过2G，时长不超过4小时</div>
    </div>
);

export default React.memo((props: any) => {
    console.log('render upload');
    const { video } = props;
    const videoEle = useRef<HTMLVideoElement>(null);
    const uploadProps = {
        showUploadList: false,
        customRequest() {},
        onChange(info: any) {
            props.onChange(info);
        },
    };
    useEffect(() => {
        if (!video || !videoEle.current) return;
        videoEle.current.src = URL.createObjectURL(video.originFileObj);
    }, [video]);
    useEffect(() => {
        if (!videoEle.current) return
        videoEle.current.src = './aliyunmedia.mp4';
    }, []);
    return (
        <Space className="upload" direction="vertical" size={20}>
            <Title text="视频上传" />
            <section>
                <Upload {...uploadProps} className="mr10">
                    <Button type="primary" disabled={props.status === 'ing'}>选择本地文件</Button>
                </Upload>
                <Popover placement="right" content={uploadTip}>
                    <InfoCircleOutlined />
                </Popover>
            </section>
            <video
                ref={videoEle}
                height="480"
                width="720"
                onTimeUpdate={props.onTimeUpdate}
                controls={props.status === ''}
                muted
            />
        </Space>
    );
});
